<template>
	<div :class="[ns.b(), ns.m(type), icon && ns.e('align')]">

		<el-link :type="type" v-bind="$attrs">
			<ElIconfont v-if="props.icon" style="margin: 1px 6px 0 0;font-size:12px" :icon="props.icon"></ElIconfont> {{ !value && value
				!== 0 ? "--" : value }}
		</el-link>
	</div>
</template>
<script lang="ts" setup>
import { PropType } from "vue";
import { useNamespace } from "@/hooks";
import { ElIconfont } from "../../ReIcon";
import { ElementIconType } from "../basic-form-box/type";

const props = defineProps({
	value: {
		type: [String, Number, Object, Array],
		default: "",
	},
	type: {
		type: String as PropType<"primary" | "warning" | "danger" | "info" | "default">,
		default: "default",
	},
	icon: String as PropType<ElementIconType>,
});

const ns = useNamespace("tabel-link");
</script>
<style lang="scss" scoped>
$ns: tabel-link;

@include block($ns) {
	display: inline-flex;
	align-items: center;

	@include element(align) {
		transform: translateY(1.1px);
	}

	@include modifier(primary) {
		color: var(--el-color-primary);
	}

	@include modifier(warning) {
		color: var(--el-color-warning);
	}

	@include modifier(danger) {
		color: var(--el-color-danger);
	}

	@include modifier(info) {
		color: var(--el-color-info);
	}
}
</style>
